<!--挂号处理页-->
<template>
    <div class="registered-process">
        <nav-com :navText="navText" :navTextDes="navTextDes"></nav-com>

        <div class="notify-con">
            <a class="status">
                告知终端状态：
                <span v-if="isNotice==false">空闲</span>
                <span v-else>
                    当前正在对【{{noticeInfo.num}}】号用户的【{{noticeInfo.vaccinename}}】进行告知！
                </span>
            </a>
            <a class="undo" v-if="isNotice==true" @click="cancelInform">撤销告知</a>
        </div>

        <div class="table-con" :style="{ minHeight: height-270+'px'}">
            <div class="list" v-for="(item,index) in bodyList" :key="index">
                <div class="num-wrapper">
                    <div>姓名：{{item.name}}</div>
                    <div>疫苗本编号：{{item.serialnum?item.serialnum:'-'}}</div>
                    <div>出生日期：{{item.birthday?item.birthday:'-'}}</div>
                    <div>母亲姓名：{{item.mothername?item.mothername:'-'}}</div>
                </div>
                <table>
                    <thead>
                    <tr>
                        <th>接种类型</th>
                        <th>疫苗名称</th>
                        <th>公司</th>
                        <th>类型</th>
                        <th>剂型</th>
                        <th>规格</th>
                        <th>剂次</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(group,indexRs) in item.rs" :key="indexRs">
                        <td>
                            <span v-if="group.inoculatetype==1">常规接种</span>
                            <span v-else-if="group.inoculatetype==2">强化接种</span>
                            <span v-else-if="group.inoculatetype==3">补漏接种</span>
                            <span v-else-if="group.inoculatetype==4">应急接种</span>
                            <span v-else-if="group.inoculatetype==5">特殊接种</span>
                            <span v-else-if="group.inoculatetype==6">预约接种</span>
                        </td>
                        <td>{{group.vaccinename}}</td>
                        <td>{{group.company}}</td>
                        <td>
                            <span v-if="group.vaccinetype==1">一类</span>
                            <span v-else-if="group.vaccinetype==2">二类</span>
                        </td>
                        <td>{{group.vaccinedose}}</td>
                        <td>{{group.rules}}</td>
                        <td>{{group.dose}}</td>
                        <td>
                            <Dropdown>
                                <a href="javascript:void(0)">
                                    操作
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">

                                    <DropdownItem v-if="group.informed==0" @click.native="notify(group)">告知</DropdownItem>
                                    <DropdownItem v-if="group.informed==0 || group.informed==3" @click.native="skipNotify(group)">跳过告知</DropdownItem>
                                    <DropdownItem v-if="group.informed==1">告知确认中</DropdownItem>
                                    <DropdownItem v-if="group.informed==3">已取消告知</DropdownItem>
                                    <DropdownItem v-if="group.informed==3" @click.native="notify(group)">重新告知</DropdownItem>
                                    <DropdownItem v-if="group.informed==9">已告知</DropdownItem>


                                    <DropdownItem @click.native="modifyVaccine(group)">修改疫苗</DropdownItem>
                                    <DropdownItem @click.native="modifyProgram(group)">修改计划</DropdownItem>
                                    <DropdownItem @click.native="continueRegister(group)">继续挂号</DropdownItem>
                                    <DropdownItem @click.native="addAppoint(group)" v-if="group.babytype==0">全部预约</DropdownItem>
                                    <DropdownItem @click.native="delect(group)">删除</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="line"></div>
            </div>

        </div>

        <!--预约情况-->
        <div class="situation">

        </div>

        <div class="bottom-btn-wrapper">
            <Button class="complete-btn" @click="over">完  成</Button>
            <Button class="add-btn"  @click="addChildren">添加儿童</Button>
        </div>

        <!--选择厂商-->
        <registerer-vendor  :visible.sync="vendorVisible"
                            :vendorList="vendorList"
                            :rid="rid"
                            @selectVaccineInfo="selectVaccineInfo"></registerer-vendor>


    </div>
</template>

<script>
    import navCom from '@/components/nav-com.vue';
    import { body,cancelNotice,changevaccine, sendNotice, jumpform,deleteVaccine,peoplePlanbaby,over} from '@/api/inoculate/inoculate';
    import registererVendor from '@/views/inoculate/components/registererVendor';

    export default {
        data () {
            return {
                navText: '挂号接种',
                navTextDes: '挂号处理',

                turnId: null,
                bodyList: [],

                isNotice: false,
                noticeInfo: {},
                noticeId: null,

                vendorVisible: false,
                vendorList: [],
                rid: null,
                height: document.documentElement.clientHeight,

                situationList:[],
            }
        },
        mounted() {
            this.getData();
        },
        methods:{
            getData(){
                body().then((res) => {
                    if(res.data.error==0){
                        this.turnId=res.data.turn.id;
                        this.bodyList=res.data.vlist;
                        this.situationList=res.data.vlist;

                        if(res.data.notice){  // 告知中
                            this.isNotice=true;
                            this.noticeInfo=res.data.notice;
                            this.noticeId=res.data.notice.id;
                        }else{
                            this.isNotice=false;  // 空闲
                        }
                    }else if(res.data.error==1){ // 去往认证页面
                        this.$router.push({path: '/home/certify'});
                    }else if(res.data.error==2){  // 去儿童挂号页面
                        let turnId=res.data.turn.id;
                        let peopleid=res.data.peopleid;
                        peoplePlanbaby({
                            id: turnId,
                            peopleid: peopleid
                        }).then((respeople) => {
                            if(respeople.data.error==0){
                                if(respeople.data.lastlist.length==0){
                                    // 本次推荐
                                    this.$router.push({path: '/home/theAppoint',query:{turnId: turnId,peopleid: peopleid}});
                                }else{
                                    // 进入上次预约
                                    this.$router.push({path: '/home/lastAppoint',query:{turnId: turnId,peopleid: peopleid}});
                                }
                            }else{
                                this.$Message.error(res.data.message);
                            }
                        })
                    }
                })
            },
            addChildren(){
                this.$router.push({path: '/home/process',query:{turnId: this.turnId}});
            },
            cancelInform(){
                cancelNotice(this.noticeId).then((res) => {
                    if(res.data.error==0){
                       this.getData();
                    }
                })
            },
          // 修改疫苗
            modifyVaccine(val){
                this.vendorVisible = true;
                this.rid= val.id;
                changevaccine({
                    rid: val.id,
                    type: val.vaccinetype
                }).then((res) => {
                    if(res.data.error==0){
                        this.vendorList=res.data.vaccinelist;
                    }
                })
            },
            selectVaccineInfo(val){
                this.getData();
            },
            // 告知
            notify(val){
                sendNotice({
                    regid: val.id
                }).then((res) => {
                    if(res.data.error==0){
                        this.getData();
                    }
                })
            },
           // 跳过告知
            skipNotify(val){
                jumpform({
                    id: val.id
                }).then((res) => {
                    if(res.data.error==0){
                        this.getData();
                    }
                })
            },
           //  删除
            delect(val){
                deleteVaccine({
                    rid: val.id
                }).then((res) => {
                    if(res.data.error==0){
                        this.getData();
                    }
                })
            },
           //  继续挂号
            continueRegister(val){
                if(val.babytype==1){  // 成人
                    this.$router.push({path: '/home/adultRegister',
                        query:{peopleid: val.vaccinated,id:val.vaccinated,turnId: val.trunid}});
                }else{
                    peoplePlanbaby({
                        id: val.trunid,
                        peopleid: val.vaccinated
                    }).then((res) => {
                        if(res.data.error==0){
                            if(res.data.lastlist.length==0){
                                // 本次推荐
                                this.$router.push({path: '/home/theAppoint',query:{turnId: val.trunid,peopleid: val.vaccinated}});
                            }else{
                                // 进入上次预约
                                this.$router.push({path: '/home/lastAppoint',query:{turnId: val.trunid,peopleid: val.vaccinated}});
                            }
                        }
                    })
                }

            },
            //修改计划
            modifyProgram(val){
                console.log(val)
                if(val.babytype==1){  // 成人
                    this.$router.push({path: '/home/adultRegister',
                        query:{peopleid: val.vaccinated,id:val.vaccinated,turnId: val.trunid,changerid:val.id}});
                }else{
                    peoplePlanbaby({
                        id: val.trunid,
                        peopleid: val.vaccinated
                    }).then((res) => {
                        if(res.data.error==0){
                            if(res.data.lastlist.length==0){
                                // 本次推荐
                                this.$router.push({path: '/home/theAppoint',query:{turnId: val.trunid,peopleid: val.vaccinated,changerid:val.id}});
                            }else{
                                // 进入上次预约
                                this.$router.push({path: '/home/lastAppoint',query:{turnId: val.trunid,peopleid: val.vaccinated,changerid:val.id}});
                            }
                        }
                    })
                }
            },
        //    全部预约
            addAppoint (val){
                this.$router.push({path: '/home/allAppoint',query:{peopleid: val.vaccinated,id: val.trunid}});
            },
            // 点击完成
            over(){
                let that = this;
                over().then((res)=>{
                    if (res.data.error==0) {
                        that.$router.push({path: 'registration'});
                    } else {
                        this.$Message.error(res.data.message);
                    }
                })
            }
        },
        components: {
            navCom,
            registererVendor
        },
    }
</script>

<style lang="less">
    .registered-process{
        .notify-con{
            .status{
                height:48px;
                line-height: 48px;
                background:rgba(255,255,255,1);
                border:1px solid rgba(227,229,235,1);
                display: inline-block;
                font-size:14px;
                font-weight:bold;
                color:rgba(79,98,124,1);
                padding:0 20px;
                margin-right: 20px;
                vertical-align: top;
                cursor:default;
                span{
                    color:#52D8C9;
                }
            }
            .undo{
                width:110px;
                height:48px;
                line-height: 48px;
                background:rgba(255,161,109,1);
                border-radius:6px;
                display: inline-block;
                font-size:14px;
                font-family:PingFang-SC-Bold;
                font-weight:bold;
                color:rgba(255,255,255,1);
                vertical-align: top;
                text-align: center;
            }
        }
        .table-con{
            margin-top:10px;
            background: #fff;
            table{
                width: 100%;
                text-align: center;
                border-collapse:collapse;
                thead{
                    height:38px;
                    line-height: 38px;
                    background:rgba(93,140,254,1);
                    font-size:14px;
                    font-family:PingFang-SC-Bold;
                    font-weight:bold;
                    color:rgba(255,255,255,1);
                }
                tbody{
                    background:rgba(245,250,255,1);
                    tr{
                        height:38px;
                        line-height: 38px;
                    }
                }
            }
            .line{
                height:4px;
                background:rgba(93,140,254,1);
                border-radius:2px;
                width:100%;
                margin-top:10px;
            }
            .btn-wrapper{
                text-align: right;
                margin-top:20px;
                padding-bottom: 20px;
                .btn1{
                    color:#FFA16D;
                    background: #fff;
                    border-color: #FFA16D;
                    margin-right: 20px;
                }
                .btn2{
                    color:#5D8CFE;
                    background: #fff;
                    border-color: #5D8CFE;
                    margin-right: 10px;
                }
            }
            .num-wrapper{
                display: flex;
                margin-bottom: 20px;
                padding:20px 0 0 20px;
                font-size:14px;
                font-family:PingFang-SC-Bold;
                font-weight:bold;
                color:rgba(53,76,107,1);
                div{
                    flex:1;
                }
            }
        }
        .bottom-btn-wrapper{
            text-align: center;
            padding:20px 0;
            background: #fff;
            .ivu-btn{
                &:first-child{
                    margin-right: 70px;
                }
            }
            .complete-btn{
                width:115px;
                height:45px;
                background:rgba(93,140,254,1);
                border-radius:6px;
                font-size:14px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(255,255,255,1);
            }
            .add-btn{
                width:150px;
                height:45px;
                background:rgba(255,161,109,1);
                border-radius:6px;
                font-size:14px;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(255,255,255,1);
            }
        }
    }
</style>
